let { CleanWebpackPlugin } = require('clean-webpack-plugin')
let html = require('html-webpack-plugin')
let cssMiniExtract = require('mini-css-extract-plugin')
let path = require('path')
let CssMinimizer = require('css-minimizer-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin');
let webpack = require('webpack')
module.exports = {
  externals: {
    echarts: 'echarts',// 要使用的引入包名：全局变量
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      // common:path.resolve(__dirname, 'src/a/b/common')
    },
    // 告诉webpack解析文件的自动添加后缀
    extensions: ['.js', '.json', '.css', '.vue'],
    modules: [path.resolve(__dirname, 'src/a/b/common'), 'node_modules'],
  },

  output: {
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    minimizer: [new CssMinimizer(), new TerserPlugin()],
    splitChunks: {
      minSize: 100,
      cacheGroups: {
        // moment_react: {
        //   filename: "m_r.js",
        //   test: /react|moment/,
        //   chunks: 'initial'
        // },
        react: {
          filename: "r.js",
          test: /react/,
          chunks: 'initial'
        },
        m: {
          filename: "m.js",
          test: /moment/,
          chunks: 'initial'
        }
      }
    }
  },
  plugins: [
    new CleanWebpackPlugin(),
    new html({
      template: './public/index.html'
    }),
    new cssMiniExtract(),
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,// 满足这个正则的文件不打包
      contextRegExp: /moment$/,// 上下文
    }),
    new webpack.ProvidePlugin({
      React: 'react',
      //属性名 是在模块中要使用的变量的名字
      // 属性值 是安装哪个模块的名字
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['thread-loader', cssMiniExtract.loader, 'css-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        use: ['thread-loader', 'babel-loader?cacheDirectory']
      }
    ]
  }
}

/*
optimization: {
        splitChunks: {
            chunks: "all",//默认作用于异步chunk，值为all/initial/async
            minSize: 30000,  //默认值是30kb,代码块的最小尺寸
            minChunks: 1,  //被多少模块共享,在分割之前模块的被引用次数
            maxAsyncRequests: 5,  //按需加载最大并行请求数量
            maxInitialRequests: 3,  //一个入口的最大并行请求数量
            name: true,  //打包后的名称，默认是chunk的名字通过分隔符（默认是～）分隔开，如vendor~
            automaticNameDelimiter: '~',//默认webpack将会使用入口名和代码块的名称生成命名,比如 'vendors~main.js'
            cacheGroups: { //设置缓存组用来抽取满足不同规则的chunk,下面以生成common为例
                vendors: {
                    chunks: "initial",
                    test: /node_modules/,//条件
                    priority: -10 ///优先级，一个chunk很可能满足多个缓存组，会被抽取到优先级高的缓存组中,为了能够让自定义缓存组有更高的优先级(默认0),默认缓存组的priority属性为负值.
                },
                commons: {
                    chunks: "initial",
                    minSize: 0,//最小提取字节数
                    minChunks: 2, //最少被几个chunk引用
                    priority: -20,
                    reuseExistingChunk: true//    如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码
                }
            }
        },
}



*/